.container1 {
  width: 600px;
  height: 400px;
  background-color: #dff5ab;
  margin-bottom: 20px;
}
img {
  float: right;
  margin-right: 0.5em;
}
.d2 {
  width: 600px;
  height: 400px;
  background-color: #abc4f5;
} /* 选中第⼀个字符 */
.d2::first-letter {
  font-size: 80px;
  /* ⾸字⺟加⼊浮动 */
  float: right;
}

.outer {
  width: 800px;
  height: 400px;
  background-color: #d7b3b3;
  padding: 10px;
  margin-bottom: 10px;
}
.box {
  font-size: 25px;
  padding: 10px;
}
.box1 {
  background-color: #99a52e;
}
.box2 {
  background-color: #2ea544;
  float: left;
  /* 浮动后margin不会塌陷问题 */
  /* margin: 10px; */
}
.box3 {
  background-color: #682ea5;
  float: left;
}

.outer1 {
  width: 380px;
  background: #ccabab;
  border: 1px solid #000;
  /* height: 120px; */
  /* float: left; */
}
.outer1::after {
  /* 设置内容为空 */
  content: ""; /* 由于默认是inline，要解决问题改为块 */
  display: block;
  clear: both;
}
.boxA {
  width: 100px;
  height: 100px;
  background-color: #36a7c7;
  border: 1px solid #000;
  margin: 10px;
  /* 设置浮动后元素不能撑起父元素的高度，但是宽度会受父元素影响 */
  /* 不会影响前面元素的布局 */
  /* float: left; */
}

.box11,
.box22,
.box33 {
  float: left;
}

.box44 {
  /* 解决当前元素占据浮动元素空间的问题 */
  /* display: inline-block; */
  /* 清除浮动，不再受浮动影响 */
  /* clear: both; */
}
